Adwaita: Update color swatch styling

The adjustments here are provisional and need an artistic eye.

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 8de9e9c88f5c6a6d372bf92f90746f7d819ee044..76d3fd0bbf1c5093a6409b48c16fd9f633fa33a5 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3122,10 +3122,6 @@ colorswatch {
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
                 inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
-    &.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class
-      background-image: linear-gradient(135deg, transparentize(white, 0.5),
-                                                transparentize(white, 1) 50%);
-    }
   }
   &:backdrop,
   &:backdrop:selected
@@ -3136,22 +3132,26 @@ colorswatch {
   }
 
   // indicator and keynav outline colors
-  &.dark overlay {
+  &.dark {
     color: white;
     outline-color: transparentize(white, 0.5);
+    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
     &:backdrop { color: transparentize(white, 0.7); }
   }
-  &.light overlay {
+  &.light {
     color: black;
     outline-color: transparentize(black, 0.5);
+    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
     &:backdrop { color: transparentize(black, 0.7); }
   }
 
   // border color
   & overlay,
   & overlay:selected {
-    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
+    background: none;
+    border: none;
   }
 
   // make the add color button looks like, well, a button

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 52ce6be18c3196b840e6b514f7691692d5c32b02..9668508d657b76f87d29e5fa9aa9924595d3846a 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4327,26 +4327,29 @@ colorswatch {
   colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
-    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
-      background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  colorswatch.dark overlay {
+  colorswatch.dark {
     color: white;
-    outline-color: rgba(255, 255, 255, 0.5); }
-    colorswatch.dark overlay:backdrop {
+    outline-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid #1c1f1f; }
+    colorswatch.dark:hover {
+      border-color: black; }
+    colorswatch.dark:backdrop {
       color: rgba(255, 255, 255, 0.3); }
-  colorswatch.light overlay {
+  colorswatch.light {
     color: black;
-    outline-color: rgba(0, 0, 0, 0.5); }
-    colorswatch.light overlay:backdrop {
-      color: rgba(0, 0, 0, 0.3); }
-  colorswatch overlay, colorswatch overlay:selected {
+    outline-color: rgba(0, 0, 0, 0.5);
     border: 1px solid #1c1f1f; }
-    colorswatch overlay:hover, colorswatch overlay:selected:hover {
+    colorswatch.light:hover {
       border-color: black; }
+    colorswatch.light:backdrop {
+      color: rgba(0, 0, 0, 0.3); }
+  colorswatch overlay, colorswatch overlay:selected {
+    background: none;
+    border: none; }
   colorswatch#add-color-button {
     border-style: solid;
     border-width: 1px;

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index ef83a14645d206315e211e701f12f0e4d89254fb..089c2d36f43d141001c34ec14281422da49442d0 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4499,26 +4499,29 @@ colorswatch {
   colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
-    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
-      background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  colorswatch.dark overlay {
+  colorswatch.dark {
     color: white;
-    outline-color: rgba(255, 255, 255, 0.5); }
-    colorswatch.dark overlay:backdrop {
+    outline-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.3); }
+    colorswatch.dark:hover {
+      border-color: rgba(0, 0, 0, 0.5); }
+    colorswatch.dark:backdrop {
       color: rgba(255, 255, 255, 0.3); }
-  colorswatch.light overlay {
+  colorswatch.light {
     color: black;
-    outline-color: rgba(0, 0, 0, 0.5); }
-    colorswatch.light overlay:backdrop {
-      color: rgba(0, 0, 0, 0.3); }
-  colorswatch overlay, colorswatch overlay:selected {
+    outline-color: rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.3); }
-    colorswatch overlay:hover, colorswatch overlay:selected:hover {
+    colorswatch.light:hover {
       border-color: rgba(0, 0, 0, 0.5); }
+    colorswatch.light:backdrop {
+      color: rgba(0, 0, 0, 0.3); }
+  colorswatch overlay, colorswatch overlay:selected {
+    background: none;
+    border: none; }
   colorswatch#add-color-button {
     border-style: solid;
     border-width: 1px;